﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
   <!-- <script src="echarts.min.js"></script> -->
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
	   <script src="./_vendor/jquery/dist/jquery.min.js"></script>
	   <script src="./jexcel-master/dist/js/jquery.jexcel.js"></script>
	   <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
	   <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
	  
   <script type="text/javascript">
	var i=0;
	var s1=4*25,s2=5*8,s3=4*6,s4=4,s5=5;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
        var option = {
            title: {
                text: 'CREE 出货监控表'
            },
            tooltip: {},
            legend: {
                data:['出货量']
            },
            xAxis: {
                data: ["FA180508139","FA180504171","FA180508116"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [s1, s2, s3]
            }]
			
        };
		myChart.setOption(option);
		function refreshDiv1() {
			var number = Math.random(); 
			number = Math.ceil(number * 5*4); 
			var number1 = Math.random(); 
			number1 = Math.ceil(number1 * 5*5); 
			var number2 = Math.random(); 
			number2 = Math.ceil(number2 * 5*4); 
			var number3 = Math.random(); 
			number3 = Math.ceil(number3 * 5*4); 
			var number4 = Math.random(); 
			number4 = Math.ceil(number4 * 5*4); 
			// 指定图表的配置项和数据
			if(i<5){
				var option = {
					title: {
						text: 'CREE 出货监控表'
					},
					tooltip: {},
					legend: {
						data:['出货量']
					},
					xAxis: {
						data: ["FA180508139","FA180504171","FA180508116"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [s1, s2, s3]
					}]
				};

				s1=s1+number;
				s2=s2+number1;
				s3=s3+number2;
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				console.log(i);
				i++;
			}
			if(i>=5&&i<12){
				var option = {
					title: {
						text: 'CREE 出货监控表'
					},
					tooltip: {},
					legend: {
						data:['出货量']
					},
					xAxis: {
						data: ["FA180508139","FA180504171","FA180508116","FA180508217"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [s1, s2, s3,s4]
					}]
				};

				//s1=s1+number;
				s2=s2+number1;
				s3=s3+number2;
				s4=s4+number3;
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				console.log(i);
				i++;
			}
			else{
				var option = {
				title: {
					text: 'CREE 出货监控表'
				},
				tooltip: {},
				legend: {
					data:['出货量']
				},
				xAxis: {
					data: ["FA180508139","FA180504171","FA180508116","FA180508217","FA180510432"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [s1, s2, s3,s4,s5]
				}]
			};

			//s1=s1+number;
			//s2=s2+number1;
			s3=s3+number2;
			s4=s4+number3;
			s5=s5+number4;
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			console.log(i);
			i++;
			}
		}

	$(function(){
		var div1Flag = setInterval(refreshDiv1, 1000*5);
		
	});	
    </script>
</body>
</html>